<template>
  <div id="app">
		<router-view></router-view>
		<ul id="footer" v-if="$store.state.footerShow">
		   <li @click="toFilm">电影</li>
		   <li @click="toCinema">影院</li>
		   <li @click="toMe">我的</li>
		</ul>
  </div>
</template>
<script type="text/javascript">
	import Vue from 'vue';
	import Vant from 'vant';
	import 'vant/lib/index.css';
	
	Vue.use(Vant);
	export default{
		methods:{
			toFilm(){
				this.$router.push('/Films')
			},
			toCinema(){
				this.$router.push('/Cinema')
			},
			toMe(){
				this.$router.push('/Me')
			}
		}
	}
</script>
<style type="text/css" scoped="scoped">
	#footer{
		display: flex;
		position: fixed;
		bottom: 0;
		justify-content: space-around;
		align-items: center;
		list-style-type: none;
		height: 1.875rem;
		width: 100%;
		line-height: 1.875rem;
		background-color: white;
		margin-left: 0;
		font-weight: bold;
		z-index: 1;
	}
	.footer>li:hover{
		color: red;
	}
</style>